<template>
    <el-dialog class="hsa-dialog" v-model="dialogVisible" :close-on-click-modal="false"
        header-class="hsa-dialog__header" footer-class="hsa-dialog__footer" @close="cancel" v-bind="$attrs">
        <!-- 头部 -->
        <template #header>
            <slot name="header"></slot>
            <title-box v-if="!$slots.header" :title="title"></title-box>
        </template>

        <!-- 内容 -->
        <div class="hsa-dialog__content">
            <slot></slot>
        </div>

        <!-- 底部 -->
        <template #footer v-if="footerShow">
            <slot name="footer"></slot>
            <div v-if="!$slots.footer" :style="buttonStyle">
                <el-button type="default" @click="cancel">取 消</el-button>
                <el-button type="primary" @click="success">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import { computed, type PropType } from 'vue'
    import TitleBox from '../title/title-box.vue'

    // 组件配置
    defineOptions({
        name: 'HsaDialog'
    })

    // 组件属性
    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        },
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 按钮对齐方式
        buttonStyle: {
            type: Object as PropType<Record<string, any>>,
            default: () => {
                return { textAlign: 'center' }
            }
        },
        // 是否显示底部
        footerShow: {
            type: Boolean,
            default: true
        }
    })

    // 组件事件
    const emit = defineEmits(['update:visible', 'success', 'cancel'])

    // 弹出框是否可见
    const dialogVisible = computed({
        get: () => props.visible,
        set: (val) => {
            console.log(val)
            emit('update:visible', val)
        }
    })

    // 确认按钮点击事件
    const success = () => {
        const close = () => dialogVisible.value = false
        emit('success', close)
    }

    // 取消按钮点击事件
    const cancel = () => {
        dialogVisible.value = false
        emit('cancel')
    }

    // 暴露属性
    defineExpose({
        success,
        cancel
    })
</script>

<!-- 全局样式 -->
<style lang="scss">
    .hsa-dialog {

        // 头部
        .hsa-dialog__header {
            border-bottom: 1px solid #cecece;
        }

        // 内容区域
        .hsa-dialog__content {
            padding: 10px;
            box-sizing: border-box;
            position: relative;
            max-height: 60vh;
            overflow-y: auto;

            // 优化滚动条样式
            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #dcdfe6;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background-color: #f5f7fa;
            }
        }

        // 底部
        .hsa-dialog__footer {
            // border-top: 1px solid #cecece;
            text-align: center;
        }
    }
</style>
